<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">

		<slot name="header"></slot>

		<div class="displayFlex" style="margin-top: 10px;">
			<div style="margin-right: 10px;">{{thisYear}}</div>
			<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(thisYear)" size="small"
				class="ml10">下载</el-button>
		</div>

		<div style="margin-top: 10px;">
			<el-table :data="tableData1.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="wasteCode" label="代码" width="150">
				</el-table-column>
				<el-table-column prop="wasteName" label="名称">
				</el-table-column>
				<el-table-column label="类别" prop="wasteClassificationStr">
				</el-table-column>
				<el-table-column prop="productionLink" label="产污环节" width="150">
				</el-table-column>
				<el-table-column prop="physicalPropertyStr" label="物理性状" width="150">
				</el-table-column>
				<el-table-column prop="mainFeatures" label="主要成分" width="150">
				</el-table-column>
				<el-table-column prop="pollutionCharacteristics" label="污染特性" width="150">
				</el-table-column>
				<el-table-column prop="qty" label="年废系数/年产生量" width="150">
					<template scope="scope">
						<span>{{scope.row.qty}}{{scope.row.unitValue}}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="displayFlex" style="margin-top: 10px;">
			<div style="margin-right: 10px;">{{thisYear-1}}</div>
			<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(thisYear-1)" size="small"
				class="ml10">下载</el-button>
		</div>

		<div style="margin-top: 10px;">
			<el-table :data="tableData2.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="wasteCode" label="代码" width="150">
				</el-table-column>
				<el-table-column prop="wasteName" label="名称">
				</el-table-column>
				<el-table-column label="类别" prop="wasteClassificationStr">
				</el-table-column>
				<el-table-column prop="productionLink" label="产污环节" width="150">
				</el-table-column>
				<el-table-column prop="physicalPropertyStr" label="物理性状" width="150">
				</el-table-column>
				<el-table-column prop="mainFeatures" label="主要成分" width="150">
				</el-table-column>
				<el-table-column prop="pollutionCharacteristics" label="污染特性" width="150">
				</el-table-column>
				<el-table-column prop="qty" label="年废系数/年产生量" width="150">
					<template scope="scope">
						<span>{{scope.row.qty}}{{scope.row.unitValue}}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="displayFlex" style="margin-top: 10px;">
			<div style="margin-right: 10px;">{{thisYear-2}}</div>
			<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(thisYear-2)" size="small"
				class="ml10">下载</el-button>
		</div>

		<div style="margin-top: 10px;">
			<el-table :data="tableData3.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="wasteCode" label="代码" width="150">
				</el-table-column>
				<el-table-column prop="wasteName" label="名称">
				</el-table-column>
				<el-table-column label="类别" prop="wasteClassificationStr">
				</el-table-column>
				<el-table-column prop="productionLink" label="产污环节" width="150">
				</el-table-column>
				<el-table-column prop="physicalPropertyStr" label="物理性状" width="150">
				</el-table-column>
				<el-table-column prop="mainFeatures" label="主要成分" width="150">
				</el-table-column>
				<el-table-column prop="pollutionCharacteristics" label="污染特性" width="150">
				</el-table-column>
				<el-table-column prop="qty" label="年废系数/年产生量" width="150">
					<template scope="scope">
						<span>{{scope.row.qty}}{{scope.row.unitValue}}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>


	</div>
</template>

<script>
	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					facilitatorId: '',
					ticketId: '',
					selectType: 0,
					startTime: '',
					endTime: '',
					entWasteId: '',
				},
				thisYear: new Date().getFullYear(),
				dateValues: [],
				tableData1: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				tableData2: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				tableData3: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.params.entWasteId = that.getQueryString("wasteId")
			that.getTableData()
		},
		methods: {

			//选择台账类型
			selectType(type) {
				that.params.selectType = -1

				setTimeout(function() {
					that.tableData.pageIndex = 1
					that.params.selectType = type
					that.getTableData()
				}, 500)

			},

			changeDate() {
				that.params.startTime = that.dateValues[0]
				that.params.endTime = that.dateValues[1]
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle(year) {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "sw/standBook/createYearStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&entWasteId=" + that.params.entWasteId +
					"&date=" + (year + "-01-01")
				window.open(appPath + apiName)
			},

			getTableData(index = 1) {
				if (index == 4) return
				that.params.date = (new Date().getFullYear() - (index - 1)) + '-01-01'
				let apiName = "/sw/standBook/getSwWasteTagYearProduceStandBookList"
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that['tableData' + index].list = result.data;
							that.getTableData(index + 1)
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>